<template>
  <fieldset>
    <legend>购物车</legend>
    <h1>{{tag}}</h1>
    <ul>
      <li v-for="item in carts" :key="item.id">
        <span>产品名称：</span>
        <b>{{item.title}}</b>
        ----------
        <span>产品单价：</span>
        <b>{{item.price}}</b>
        ----------
        <span>数量：</span>
        <b>{{item.count}}</b>
      </li>
    </ul>
    <h1 :style="{textAlign:'right'}">
      总价格：
      <span :style="{color:'red'}">{{total.toFixed(2)}}</span>
    </h1>
  </fieldset>
</template>

<script>
import {mapState,mapGetters} from "vuex"
  export default {
    computed:{
      ...mapState("Cart",["tag","carts"]),
      ...mapGetters("Cart",["total"])
    }
  }
</script>

<style>

</style>